<template>
  <el-form :model="formInline" class="search" @submit.prevent>
    <div class="condition-1">
      <el-form-item label="品牌：">
        <el-select v-model="formInline.brandId" placeholder="请选择" clearable>
          <el-option :label="item.name" :value="item.id" v-for="item in getDict('accessoryBrand')" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="名称：">
        <el-input v-model="formInline.name" placeholder="请填写" clearable />
      </el-form-item>
    </div>
    <div class="condition-btn">
      <el-form-item>
        <el-button type="primary" :icon="Search" native-type="submit" @click="onSubmit">搜索</el-button>
        <el-button type="primary" :icon="Refresh" @click="onReset">重置</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import mittBus from "@/utils/mittBus";
import { useDict } from "@/hooks/useDict";
import { Search, Refresh } from "@element-plus/icons-vue";

const { getDict } = useDict(["accessoryBrand"]);
const formInline = reactive({
  brandId: null,
  name: ""
});

const onSubmit = () => {
  mittBus.emit("searchAccessory", formInline);
};
const onReset = () => {
  formInline.brandId = null;
  formInline.name = "";
  mittBus.emit("searchAccessory", formInline);
};
</script>

<style lang="scss" scoped>
.search {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 18px 26px 0;
  .condition-1 {
    display: flex;
    flex: 1;
    gap: 71px;
    width: 100%;
    .el-form-item {
      width: 250px;
    }
  }
  .condition-btn {
    display: flex;
    flex: 0 0 280px;
    justify-content: flex-end;
  }
}
</style>
